<template>
  <a-layout-content class="toolbar-block">
    <a-switch
      v-model="designType"
      type="round"
      checked-color="#165DFF"
      unchecked-color="#F77234"
    >
      <template #checked>
        表单设计
      </template>
      <template #unchecked>
        事件设计
      </template>
    </a-switch>

    <!-- 按钮 -->
    <a-button-group
      v-if="designType"
      type="primary"
      size="mini"
      status="normal"
    >
      <a-button @click.stop="showStructure">
        <template #icon>
          <icon-mind-mapping />
        </template>
        页面结构
      </a-button>
      <a-button @click.stop="exportJson">
        <template #icon>
          <icon-share-external />
        </template>
        导出JSON
      </a-button>
      <a-button @click.stop="previewForm">
        <template #icon>
          <icon-eye />
        </template>
        预览
      </a-button>
      <a-button @click.stop="consoleEventConfig">
        <template #icon>
          <icon-eye />
        </template>
        控制台输出注册事件配置
      </a-button>
    </a-button-group>

    <!--表单结构-->
    <a-drawer
      unmount-on-close
      popup-container="#FormDesignIndex"
      placement="left"
      :width="300"
      :visible="structureVisible"
      :footer="null"
      @cancel="structureVisible = false"
    >
      <template #title>
        表单结构
      </template>
      <a-tree
        :default-selected-keys="[selected.id]"
        :data="formList"
        :field-names="{
            key: 'id',
            title: 'id',
            children: 'formList',
        }"
        :show-line="true"
        @select="selectNode"
      >
        <template #icon="{node}">
          <component :is="node.icon" v-if="node.icon" />
          <icon-file />
        </template>
      </a-tree>
    </a-drawer>

    <!--JSON-->
    <code-editor
      ref="codeEditorRef"
      v-model:code="showJSON"
    />

    <a-modal
      title="预览表单"
      width="1000px"
      :visible="formRenderVisible"
      @cancel="formRenderVisible = false"
    >
      <a-scrollbar style="max-height:650px; overflow: auto;">
        <form-render
          ref="previewFormRef"
          v-if="formRenderVisible"
          v-model:model="formModel"
          :form-config="formConfig"
          :form-list="formList"
        />
      </a-scrollbar>
      <template #footer>
        <a-button-group type="primary" status="normal">
          <a-button @click.stop="getFormModel">
            <template #icon>
              <icon-paste />
            </template>
            获取表单值
          </a-button>
          <a-button @click.stop="resetFormModel">
            <template #icon>
              <icon-refresh />
            </template>
            重置表单值
          </a-button>
          <a-button @click.stop="validateFormModel">
            <template #icon>
              <icon-check />
            </template>
            校验表单值
          </a-button>
          <a-button @click.stop="clearValidate">
            <template #icon>
              <icon-refresh />
            </template>
            重置校验
          </a-button>
        </a-button-group>
      </template>
    </a-modal>
  </a-layout-content>
</template>

<script lang="ts" setup>
import { inject, ref, defineProps, defineEmits, defineModel } from 'vue';
import { Message } from '@arco-design/web-vue';
import { PROVIDE_KEY_SELECTED } from '@/components/form-design/provide_key';
import CodeEditor from '@/components/code-editor/index.vue';
import FormRender from '@/components/form-render/index.vue';

const emits = defineEmits(['selectItem', 'consoleEventConfig']);

const props = defineProps({
  formList: {
    type: Array,
    default: () => []
  },
  formConfig: {
    type: Object,
    default: () => {
    }
  }
});

const designType = defineModel('designType', { type: Boolean, default: true });

const selected = inject(PROVIDE_KEY_SELECTED);

const structureVisible = ref(false);

const showJSON = ref('');

const codeEditorRef = ref();

const formRenderVisible = ref(false);

const formModel = ref({});

const previewFormRef = ref();

const showStructure = () => {
  structureVisible.value = true;
};

const selectNode = (selectedKeys: any, data: any) => {
  if (selectedKeys && selectedKeys.length === 1) {
    emits('selectItem', data.node);
  }
};

const exportJson = () => {
  showJSON.value = JSON.stringify(props.formList, null, 2);
  codeEditorRef.value.open();
};

const previewForm = () => {
  formModel.value = {};
  formRenderVisible.value = true;
};

const getFormModel = () => {
  showJSON.value = JSON.stringify(formModel.value, null, 2);
  codeEditorRef.value.open();
};

const validateSuccessCallBack = () => {
  Message.success('校验成功');
};

const validateFailCallBack = () => {
  Message.error('校验失败');
};

const validateFormModel = () => {
  previewFormRef.value.validateForm(validateSuccessCallBack, validateFailCallBack);
};

const clearValidate = () => {
  previewFormRef.value.clearValidate();
};

const resetFormModel = () => {
  formModel.value = {};
  previewFormRef.value.clearValidate();
};

const consoleEventConfig = () => {
  emits('consoleEventConfig');
};
</script>

<script lang="ts">
export default {
  name: 'ToolHeader'
};
</script>

<style lang="less" scoped>
.toolbar-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #E2E2E2;
}
</style>